<style>
    .customer_demo_class {
        width: 200px;
        background: var(--primary);
        height: 200px;
        text-align: center;
        display: flex;
        align-items: center;
        margin-bottom: 20px;
    }

    .customer_demo_class span {
        width: 100%;
        color: #fff;
        font-size: 43px;
    }
</style>
<template>
    <ly-page>
        <ly-navi title="动画"></ly-navi>
        <ly-page-content>

            <el-form label-width="125px" size="small">
                <el-divider content-position="left">显示与隐藏</el-divider>
                <el-form-item label="进入动画" prop="name">
                    <el-cascader v-model="form.enter" style="width: 360px;" :options="animates"></el-cascader>
                </el-form-item>
                <el-form-item label="离开动画" prop="name">
                    <el-cascader v-model="form.leave" style="width: 360px;" :options="animates"></el-cascader>
                </el-form-item>
                <el-form-item>
                    <el-button @click="show = !show" type="primary">{{show?'隐藏':'显示'}}</el-button>
                </el-form-item>
                <el-form-item>
                    <div style="padding:20px;width: 240px;height: 240px;border: 1px solid #efefef">
                        <transition
                                :enter-active-class="'animated '+form.enter[1]"
                                :leave-active-class="'animated '+form.leave[1]"
                        >

                            <div class="customer_demo_class" v-if="show"><span>动画</span></div>
                        </transition>

                    </div>
                </el-form-item>
                <ly-code-view>
                    <pre v-pre>
<transition
        enter-active-class="animated 动画名"
        leave-active-class="animated 动画名"
>
    <div v-if="show"><span>动画</span></div>
</transition>
                    </pre>
                </ly-code-view>
                <el-divider content-position="left">手动触发</el-divider>
                <el-form-item label="动画" prop="name">
                    <el-cascader v-model="form1.animate" style="width: 360px;" :options="animates"></el-cascader>
                </el-form-item>
                <el-form-item label="时长" prop="name">
                    <el-slider style="width:500px;" :step="100" :min="0" :max="5000"
                               v-model="form1.duration"></el-slider>
                </el-form-item>

                <el-form-item>
                    <el-button @click="trigger++" type="primary">触发</el-button>

                </el-form-item>
                <el-form-item>
                    <div style="padding:20px;width: 240px;height: 240px;border: 1px solid #efefef">
                        <ly-animate :trigger="trigger" :duration="form1.duration" :animate="form1.animate[1]">
                            <div style="margin-top: 20px;" class="customer_demo_class"><span>动画</span></div>
                        </ly-animate>
                    </div>
                </el-form-item>
                <ly-code-view>
                    <pre v-pre>
触发只需要改变trigger的值就行
<el-button v-on:click="trigger++" type="primary">触发</el-button>

<ly-animate :trigger="trigger" :duration="form1.duration" :animate="form1.animate[1]">
    <div style="margin-top: 20px;" class="customer_demo_class"><span>动画</span></div>
</ly-animate>
                    </pre>
                </ly-code-view>
                <el-divider content-position="left">滚动监听</el-divider>
                <div>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <ly-animate animate="fadeIn" scroll>
                                <div class="customer_demo_class"><span>fadeIn</span></div>
                            </ly-animate>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6" :offset="6">
                            <ly-animate animate="bounceIn" scroll>
                                <div class="customer_demo_class"><span>zoomIn</span></div>
                            </ly-animate>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6" :offset="12">
                            <ly-animate animate="flipInX" scroll>
                                <div class="customer_demo_class"><span>zoomInUp</span></div>
                            </ly-animate>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6" :offset="18">
                            <ly-animate animate="slideInUp" scroll>
                                <div class="customer_demo_class"><span>slideInUp</span></div>
                            </ly-animate>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6" :offset="12">
                            <ly-animate animate="lightSpeedIn" scroll>
                                <div class="customer_demo_class"><span>slideInLeft</span></div>
                            </ly-animate>

                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6" :offset="6">
                            <ly-animate animate="slideInRight" scroll>
                                <div class="customer_demo_class"><span>slideInRight</span></div>
                            </ly-animate>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">

                            <ly-animate animate="slideInLeft" scroll>
                                <div class="customer_demo_class"><span>slideInDown</span></div>
                            </ly-animate>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="6">
                            <ly-animate animate="fadeIn" scroll>
                                <div class="customer_demo_class"><span>fadeIn</span></div>
                            </ly-animate>
                        </el-col>
                        <el-col :span="6">
                            <ly-animate animate="fadeIn" scroll delay="300">
                                <div class="customer_demo_class"><span>delay300</span></div>
                            </ly-animate>
                        </el-col>
                        <el-col :span="6">
                            <ly-animate animate="fadeIn" scroll delay="600">
                                <div class="customer_demo_class"><span>delay600</span></div>
                            </ly-animate>
                        </el-col>
                        <el-col :span="6">
                            <ly-animate animate="fadeIn" scroll delay="900">
                                <div class="customer_demo_class"><span>delay900</span></div>
                            </ly-animate>
                        </el-col>
                    </el-row>
                    <ly-code-view>
                    <pre v-pre>
//滚动监听
<ly-animate animate="fadeIn" scroll >
       内容
</ly-animate>

//滚动监听 延时
<ly-animate animate="fadeIn" scroll delay="900">
       内容
</ly-animate>

                        </pre>
                    </ly-code-view>

                </div>


            </el-form>
            <ly-markdown>
            <pre v-pre>
##`ly-markdown `

#### Attributes

| 属性名  |说明   | 类型|参数|
| ------------ | ------------ |------------ |------------ |
|  ly-animate | 动画类型	  |string |—	|
|  trigger | 触发器,变化就会触发动画	  |int |—	|
|  duration | 动画时间(只有触发类型有效,单位毫秒)	  |int |—	|
|  scroll | 监听滚动事件	  |boolean |—	|
|  delay |动画延时(单位毫秒)	  |int |—	|


            </pre>
            </ly-markdown>

        </ly-page-content>
    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    show: true,
                    trigger: 0,
                    form: {

                        enter: ['', 'bounceIn'],
                        leave: ['', 'bounceOut']
                    },
                    form1: {
                        animate: ['', 'bounce'],
                        duration: 0
                    },
                    animates: [{
                        "label": "提醒",
                        "value": "提醒",
                        "children": [{"label": "bounce", "value": "bounce"}, {
                            "label": "flash",
                            "value": "flash"
                        }, {"label": "pulse", "value": "pulse"}, {
                            "label": "rubberBand",
                            "value": "rubberBand"
                        }, {"label": "shake", "value": "shake"}, {"label": "swing", "value": "swing"}, {
                            "label": "tada",
                            "value": "tada"
                        }, {"label": "wobble", "value": "wobble"}, {
                            "label": "jello",
                            "value": "jello"
                        }, {"label": "heartBeat", "value": "heartBeat"}]
                    }, {
                        "label": "弹性进入",
                        "value": "弹性进入",
                        "children": [{"label": "bounceIn", "value": "bounceIn"}, {
                            "label": "bounceInDown",
                            "value": "bounceInDown"
                        }, {"label": "bounceInLeft", "value": "bounceInLeft"}, {
                            "label": "bounceInRight",
                            "value": "bounceInRight"
                        }, {"label": "bounceInUp", "value": "bounceInUp"}]
                    }, {
                        "label": "弹性离开",
                        "value": "弹性离开",
                        "children": [{"label": "bounceOut", "value": "bounceOut"}, {
                            "label": "bounceOutDown",
                            "value": "bounceOutDown"
                        }, {"label": "bounceOutLeft", "value": "bounceOutLeft"}, {
                            "label": "bounceOutRight",
                            "value": "bounceOutRight"
                        }, {"label": "bounceOutUp", "value": "bounceOutUp"}]
                    }, {
                        "label": "逐渐进入",
                        "value": "逐渐进入",
                        "children": [{"label": "fadeIn", "value": "fadeIn"}, {
                            "label": "fadeInDown",
                            "value": "fadeInDown"
                        }, {"label": "fadeInDownBig", "value": "fadeInDownBig"}, {
                            "label": "fadeInLeft",
                            "value": "fadeInLeft"
                        }, {"label": "fadeInLeftBig", "value": "fadeInLeftBig"}, {
                            "label": "fadeInRight",
                            "value": "fadeInRight"
                        }, {"label": "fadeInRightBig", "value": "fadeInRightBig"}, {
                            "label": "fadeInUp",
                            "value": "fadeInUp"
                        }, {"label": "fadeInUpBig", "value": "fadeInUpBig"}]
                    }, {
                        "label": "逐渐离开",
                        "value": "逐渐离开",
                        "children": [{"label": "fadeOut", "value": "fadeOut"}, {
                            "label": "fadeOutDown",
                            "value": "fadeOutDown"
                        }, {"label": "fadeOutDownBig", "value": "fadeOutDownBig"}, {
                            "label": "fadeOutLeft",
                            "value": "fadeOutLeft"
                        }, {"label": "fadeOutLeftBig", "value": "fadeOutLeftBig"}, {
                            "label": "fadeOutRight",
                            "value": "fadeOutRight"
                        }, {"label": "fadeOutRightBig", "value": "fadeOutRightBig"}, {
                            "label": "fadeOutUp",
                            "value": "fadeOutUp"
                        }, {"label": "fadeOutUpBig", "value": "fadeOutUpBig"}]
                    }, {
                        "label": "翻转",
                        "value": "翻转",
                        "children": [{"label": "flip", "value": "flip"}, {
                            "label": "flipInX",
                            "value": "flipInX"
                        }, {"label": "flipInY", "value": "flipInY"}, {
                            "label": "flipOutX",
                            "value": "flipOutX"
                        }, {"label": "flipOutY", "value": "flipOutY"}]
                    }, {
                        "label": "变速",
                        "value": "变速",
                        "children": [{"label": "lightSpeedIn", "value": "lightSpeedIn"}, {
                            "label": "lightSpeedOut",
                            "value": "lightSpeedOut"
                        }]
                    }, {
                        "label": "旋转进入",
                        "value": "旋转进入",
                        "children": [{"label": "rotateIn", "value": "rotateIn"}, {
                            "label": "rotateInDownLeft",
                            "value": "rotateInDownLeft"
                        }, {"label": "rotateInDownRight", "value": "rotateInDownRight"}, {
                            "label": "rotateInUpLeft",
                            "value": "rotateInUpLeft"
                        }, {"label": "rotateInUpRight", "value": "rotateInUpRight"}]
                    }, {
                        "label": "旋转离开",
                        "value": "旋转离开",
                        "children": [{"label": "rotateOut", "value": "rotateOut"}, {
                            "label": "rotateOutDownLeft",
                            "value": "rotateOutDownLeft"
                        }, {"label": "rotateOutDownRight", "value": "rotateOutDownRight"}, {
                            "label": "rotateOutUpLeft",
                            "value": "rotateOutUpLeft"
                        }, {"label": "rotateOutUpRight", "value": "rotateOutUpRight"}]
                    }, {
                        "label": "移动进入",
                        "value": "移动进入",
                        "children": [{"label": "slideInUp", "value": "slideInUp"}, {
                            "label": "slideInDown",
                            "value": "slideInDown"
                        }, {"label": "slideInLeft", "value": "slideInLeft"}, {
                            "label": "slideInRight",
                            "value": "slideInRight"
                        }]
                    }, {
                        "label": "移动离开",
                        "value": "移动离开",
                        "children": [{"label": "slideOutUp", "value": "slideOutUp"}, {
                            "label": "slideOutDown",
                            "value": "slideOutDown"
                        }, {"label": "slideOutLeft", "value": "slideOutLeft"}, {
                            "label": "slideOutRight",
                            "value": "slideOutRight"
                        }]
                    }, {
                        "label": "放大进入",
                        "value": "放大进入",
                        "children": [{"label": "zoomIn", "value": "zoomIn"}, {
                            "label": "zoomInDown",
                            "value": "zoomInDown"
                        }, {"label": "zoomInLeft", "value": "zoomInLeft"}, {
                            "label": "zoomInRight",
                            "value": "zoomInRight"
                        }, {"label": "zoomInUp", "value": "zoomInUp"}]
                    }, {
                        "label": "缩小离开",
                        "value": "缩小离开",
                        "children": [{"label": "zoomOut", "value": "zoomOut"}, {
                            "label": "zoomOutDown",
                            "value": "zoomOutDown"
                        }, {"label": "zoomOutLeft", "value": "zoomOutLeft"}, {
                            "label": "zoomOutRight",
                            "value": "zoomOutRight"
                        }, {"label": "zoomOutUp", "value": "zoomOutUp"}]
                    }, {
                        "label": "特殊",
                        "value": "特殊",
                        "children": [{"label": "hinge", "value": "hinge"}, {
                            "label": "jackInTheBox",
                            "value": "jackInTheBox"
                        }, {"label": "rollIn", "value": "rollIn"}, {"label": "rollOut", "value": "rollOut"}]
                    }]
                }
            },
            mounted: function () {
                var map = {};
                var items = [];
                for (var k in map) {
                    var list = map[k];
                    var item = {};
                    item.label = k;
                    item.value = k;
                    var children = [];
                    for (var i = 0; i < list.length; i++) {
                        children.push({
                            label: child,
                            value: child
                        })

                    }
                    item.children = children;
                    items.push(item);
                }
                console.log(items);
            },
            methods: {}
        }
    })
</script>